<template>
    <div class="knowledgebase_main">

        <el-row class="head">
            <el-col :span="24">
                <h1 class="contract_title">客户投诉</h1>
                <span class="" style="margin-left: 10px">/ 记录和处理客户投诉</span>
            </el-col>
        </el-row >

        <el-row class="nav" style=" border-radius: 4px">
            <el-col>
                <div class="nav-item" @click="dialogFormVisible = true"><i class="iconfont icon-qianbi"></i> 新增</div>

                <div class="nav-item2">
                    <download-excel :data="tableData" :fields="excelFields" name="客户投诉记录表.xls" type="xls">
                        <el-button type="text">
                            <i class="iconfont icon-excel"></i>Excel导出
                        </el-button>
                    </download-excel>
                </div>

                <el-form style="display:inline-block">
                    <div class="nav-item" style="border:none">
                        <el-input v-model="searchParam" clearable placeholder="请输入内容"></el-input>
                    </div>
                    <div style="display:inline-block">
                        <el-button  @click="searchK">搜索</el-button>
                    </div>
                </el-form>

            </el-col>
        </el-row>


<!--        数据内容-->
        <div class="content" style=" border-radius: 4px">

            <el-tabs style="margin-bottom: 0px;height: 41px;" type="card"  @tab-click="changeTab">
                <el-tab-pane label="全部" name="first"></el-tab-pane>
                <el-tab-pane label="产品投诉" name="second"></el-tab-pane>
                <el-tab-pane label="服务投诉" name="third"></el-tab-pane>
                <el-tab-pane label="客户意见" name="fourth"></el-tab-pane>
                <el-tab-pane label="其他" name="fifth"></el-tab-pane>
            </el-tabs>

<!--  数据表格  -->
            <el-table :data="tableData" style="width: 100%;min-height: 300px;margin-top: 0px" v-loading="loading" @cell-click="go_detail">

                <el-table-column prop="complaintId" type="selection" style="width: 5%" header-align="center" align="center" ></el-table-column>

                <el-table-column prop="complaintId" label="编号" width="80">
                </el-table-column>

                <el-table-column label="投诉主题" prop="complaintTle">
                </el-table-column>

                <el-table-column label="投诉描述" show-overflow-tooltip width="200" prop="comDescribe">
                </el-table-column>

                <el-table-column label="对应客户" show-overflow-tooltip width="100" prop="customer.customerName">
                </el-table-column>

                <el-table-column prop="comTime" label="发布时间" width="150">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>  {{scope.row.comTime | formatDate}}
                    </template>
                </el-table-column>

                <el-table-column label="紧急程度">
                    <template slot-scope="scope">
                        <span v-if="scope.row.degreeUrgency == 1">非常紧急</span>
                        <span v-if="scope.row.degreeUrgency == 2">紧急</span>
                        <span v-if="scope.row.degreeUrgency == 3">普通</span>
                    </template>
                </el-table-column>

                <el-table-column label="接待人">
                    <template slot-scope="scope">
                        {{scope.row.emp.empName}}
                    </template>
                </el-table-column>

                <el-table-column label="处理结果">
                    <template slot-scope="scope">
                        <span v-if="scope.row.comResult == 1">已处理</span>
                        <span v-if="scope.row.comResult == 2">未处理</span>
                        <span v-if="scope.row.comResult == 3">处理中</span>
                    </template>
                </el-table-column>

                <el-table-column label="管理">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="editOne(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="deteleOne(scope.row)"></el-button>
                    </template>
                </el-table-column>

            </el-table>

            <!--    分页-->
            <div class="pagePlug">
                <div class="block" style="margin-top:10px">
                    <el-pagination background layout="total, prev, pager, next"
                                   :total="totalSize"
                                   :page-size="pageSize"
                                   @current-change="changePage" >
                    </el-pagination>
                </div>
            </div>
        </div>

<!--        新增弹窗  -->
        <el-dialog title="新增投诉" :visible.sync="dialogFormVisible" width="50%">
            <el-form  :model="complaint" label-width="80px" style="overflow: hidden" class="ncsText">

                <el-form-item label="对应客户">
                    <el-select v-model="complaint.customer.customerId" value-key="customerId" placeholder="请选择客户" >
                        <el-option v-for="item in customerList"
                                   :key="item.customerId"
                                   :label="item.customerName"
                                   :value="item.customerId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="投诉主题">
                    <el-input v-model="complaint.complaintTle" style="width: 500px"></el-input>
                </el-form-item>

                <el-form-item label="投诉描述">
                    <el-input
                            v-model="complaint.comDescribe"
                            type="textarea"
                            :autosize="{ minRows: 5, maxRows: 10}"
                            placeholder="请输入内容"
                            style="width: 500px">
                    </el-input>
                </el-form-item>

                <el-form-item label="客户反馈">
                    <el-input
                            v-model="complaint.cusBack"
                            type="textarea"
                            :autosize="{ minRows: 5, maxRows: 10}"
                            placeholder="请输入内容"
                            style="width: 500px">
                    </el-input>
                </el-form-item>

                <el-form-item label="紧急程度">
                    <el-select v-model="complaint.degreeUrgency" placeholder="请选择">
                        <el-option label="非常紧急" value="1"></el-option>
                        <el-option label="紧急" value="2"></el-option>
                        <el-option label="普通" value="3"></el-option>

                    </el-select>
                </el-form-item>

                <el-form-item label="投诉类型">
                    <el-select v-model="complaint.comType" placeholder="请选择">
                        <el-option label="产品投诉" value="产品投诉"></el-option>
                        <el-option label="服务投诉" value="服务投诉"></el-option>
                        <el-option label="客户意见" value="客户意见"></el-option>
                        <el-option label="其它" value="其它"></el-option>

                    </el-select>
                </el-form-item>

                <el-form-item label="回访确认">
                    <el-input
                            v-model="complaint.callback"
                            type="textarea"
                            :autosize="{ minRows: 5, maxRows: 10}"
                            placeholder="请输入内容"
                            style="width: 500px">
                    </el-input>
                </el-form-item>

                <el-form-item label="处理结果">
                    <el-select v-model="complaint.comResult" placeholder="请选择">
                        <el-option label="已处理" value="1"></el-option>
                        <el-option label="未处理" value="2"></el-option>
                        <el-option label="处理中" value="3"></el-option>

                    </el-select>
                </el-form-item>

                <el-form-item label="处理过程">
                    <el-input
                            v-model="complaint.comCourse"
                            type="textarea"
                            :autosize="{ minRows: 5, maxRows: 10}"
                            placeholder="请输入内容"
                            style="width: 500px">
                    </el-input>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input
                            v-model="complaint.remark"
                            type="textarea"
                            :autosize="{ minRows: 5, maxRows: 10}"
                            placeholder="请输入内容"
                            style="width: 500px">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit(),dialogFormVisible = false">立即创建</el-button>
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

    </div>
</template>

<script>
    import {formatTimeToStr} from '@/assets/format.js'

    export default {
        name: "Complaint",
        data: function() {
            return {
                tableData:[],
                textType:[],
                loading:true,
                searchParam:"",//搜索框内容
                kcName:"",//表头名字
                pageSize:5,//分页页大小
                currPage:1,//当前页码，默认为1
                totalSize:0,//总记录数
                dialogTableVisible: false,
                dialogFormVisible: false,
                complaint: {
                    complaintId:0,
                    customerId:1,
                    complaintTle:'',
                    comDescribe:'',
                    comTime:'',
                    comType:'',
                    degreeUrgency:0,
                    comCourse:'',
                    comResult:0,
                    complaintTime:'',
                    cusBack:'',
                    callback:'',
                    remark:'',
                    emp:{},
                    customer:{},
                    check:0
                },
                detailData:{},//传去详情页面的数据,
                customerList:{},//客户集合,
                //Excel导出对应关系
                excelFields: {
                    "投诉记录编号": "complaintId",
                    "对应客户":"customer.customerName",
                    "投诉主题": "complaintTle",		//支持嵌套属性
                    "投诉内容": "comDescribe",
                    "投诉类型": "comType",
                    "紧急程度": {
                        field:"degreeUrgency",
                        callback: value => {
                            if(value==1){
                                return "非常紧急"
                            }else if(value==2){
                                return "紧急"
                            }else{
                                return "普通"
                            }
                        }
                    },
                    "记录时间": "comTime",
                    "执行人": "emp.empName",
                    "客户反馈":"callback",
                    "处理结果":{
                        field: "comResult",
                        callback: value => {
                            if(value==1){
                                return "已处理"
                            }else if(value==2){
                                return "未处理"
                            }else{
                                return "处理中"
                            }}},
                    "审批状态": {
                        field: "check",
                        callback: value => {
                            if(value==0){
                                return "未审批"
                            }else{
                                return "审批通过"
                            }
                        }
                    },
                    "备注":"remark"
                }
            };
        },
        methods: {
            initData(currPage,pageSize,search,kcName){
                this.loading=true;
                this.$axios.get("api/after-sale/complaint/complaint-list",{params:{page:currPage,size:pageSize,search:search,kcName:kcName}})
                    .then(v=>{
                        this.tableData = v.data.rows;
                        this.totalSize = v.data.total;
                        this.loading = false;
                    }).catch();
            },
            onSubmit(){
                this.complaint.emp = this.$store.state.user
                this.$axios.post("api/after-sale/complaint/add-complaint",this.complaint).then(v=>{
                    this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName);
                    this.dialogFormVisible = false;
                    this.complaint = {
                        complaintId:0,
                        complaintTle:'',
                        comDescribe:'',
                        comTime:'',
                        comType:'',
                        degreeUrgency:0,
                        comCourse:'',
                        comResult:0,
                        complaintTime:'',
                        cusBack:'',
                        callback:'',
                        remark:'',
                        emp:{},
                        customer:{},
                        check:0
                    };
                }).catch();
            },
            deteleOne(k){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("api/after-sale/complaint/delete-complaint",this.qs.stringify({cNo:k.complaintId}))
                        .then(v=>{
                            this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName);
                        }).catch();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            editOne(k){
                this.dialogFormVisible = true;
                this.complaint = {
                    complaintId:k.complaintId,
                    customerId:k.customerId,
                    complaintTle:k.complaintTle,
                    empId:k.empId,
                    comDescribe:k.comDescribe,
                    comTime:k.comTime,
                    comType:k.comType,
                    degreeUrgency:k.degreeUrgency,
                    comCourse:k.comCourse,
                    comResult:k.comResult,
                    complaintTime:k.complaintTime,
                    cusBack:k.cusBack,
                    callback:k.callback,
                    remark:k.remark,
                    emp:{
                        empId:k.emp.empId,
                        empName:k.emp.empName
                    },
                    customer:{
                        customerId:k.customer.customerId,
                        customerName:k.customer.customerName
                    },
                    check:k.check
                }
            },
            searchK(){
                this.initData(1,this.pageSize,this.searchParam,this.kcName);
            },
            changeTab(tab){
                var KCname = tab.label;
                if (KCname=='全部'){
                    KCname ='';
                }
                this.kcName = KCname;
                this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName);
            },
            changePage(val){
                //val就是当前页码
                this.initData(val,this.pageSize,this.searchParam,this.kcName);
            },
            go_detail(row, column){
                if("投诉主题"==column.label) {
                    //console.log(row);
                    this.detailData = row;
                    sessionStorage.setItem("complaint", JSON.stringify(this.detailData));
                    this.$router.push({path: "/complaint-detail"});
                }
            },
            initCusList(){
                this.$axios.get("api/customer/select_cus")
                    .then(v=>{
                        this.customerList = v.data;
                    }).catch();
            }
        },
        created(){
            this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName);
            this.initCusList();
        },
        filters: {
            formatDate: function(time) {
                if(time!=null&&time!="")
                {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd");
                }else{
                    return "";
                }
            }
        }
    };
</script>

<style scoped="scoped">
    *{margin: 0;padding: 0;font-size: 14px;}
    .knowledgebase_main{background: #e4e7ee}
    .head{height:70px;background: #fcfbfd;line-height: 70px}
    .contract_title{display: inline-block;font-weight: unset;margin-left: 20px;font-size: 25px;}
    .el-col span{color: #b4b4bc}

    .nav{margin: 20px;background: #fcfbfd;width: 100%-40px;height: 55px;line-height: 55px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)}
    .nav .nav-item{display: inline-block;height:25px;padding: 0px 15px;border-right: 1px solid #dcdfe6;line-height: 25px;cursor: pointer}
    .nav-item2{color:#636e7b;display: inline-block;height:25px;padding: 0px 15px;line-height: 25px;cursor: pointer}
    .content{min-height:350px;margin: 20px;background: #fcfbfd;width: 100%-40px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)}
    /*分页*/
    .pagePlug{
        height: 50px;
        padding-top: 20px;
    }
    .active {
        background-color: rgb(67,149,255) !important;
    }

    /*操作按钮*/
    .el-table .el-button{width: 30px;height: 30px}
    .el-button.is-circle{padding: 2px !important;}

    /*    弹窗*/
    .NTtitle{
        width: 60px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
    .ncsText .el-form-item{width: 100%;margin-bottom: 22px !important;}

</style>